var tangjie={
    template:`
    <div id="app">
    <div class="gray">
        <div class="tang_top">
            <div class="tang_top_left" @click='tiao'>
                <img :src="tang_img1">
            </div>
            <div class="tang_top_right">
                <div v-for="item in tang_iconfont">
                    <img :src="item" alt="">
                </div>
            </div>
        </div>
        <div class="tang_top1-a">
            <div>
                <img :src="tang_top1_aimg" alt="">
            </div>
        </div>

        <div class="tang_body">
            <h6>{{tang_body.name}}</h6>

            <p class="tang_zhu">{{tang_body.zuozhe}}</p>

            <div class="tang_zhui">
                <div class="blue">
                    <img :src="tang_body.img1" alt="">
                    <span>16+</span>
                </div>

            </div>

            <div class="tang_re">
                <div class="pur">
                    <img :src="tang_body.img2" alt="">
                    <span>{{tang_body.ti}}</span>
                </div>

            </div>

        </div>

        <div class="tang_body1" @click='tiaoqu'>
            <div class="tang_he1" v-for="item in tang_body1">
                <div class="tang_he1_wen1">{{item.num}}</div>
                <div class="tang_he1_wen2">{{item.title}}</div>
            </div>

        </div>
        <div class="tang_body2">
            <div class="tang_s">
                <div class="tang_s1">
                    <div class="tang_s1a" v-for="item in tang_s1a">{{item}}</div>
                </div>
            </div>

            <div class="tang_body2_wen1" ref="wen1">
                <div>{{tang_body2_wen1}}</div>
                <div class="tang_zhan" @click="tang_fn1" ref="zhankai">展开</div>
                <div class="tang_zhan" @click="tang_fn2" ref="shouqi" style="display: none;">收起</div>
            </div>


            <div class='tang_body2_foot'>
                <div class='tang_body2_foot_left'>
                    {{tang_body2_foot.title1}}
                </div>
                <div class='tang_body2_foot_right'>
                    {{tang_body2_foot.title2}}
                </div>
            </div>
        </div>

        <div class="tang_foot">
            <div class="tang_foot_click">开始阅读</div>
        </div>




    </div>



</div>
    `,
    data() {
        return {
            tang_img1: './iconfont/返回.png',
            tang_top1_aimg: './img/180.jpg',
            tang_body: { name: '斗破苍穹', zuozhe: '著：天蚕土豆', img1: './iconfont/书_.png', img2: './iconfont/热搜.png', ti: 'No.1' },
            tang_iconfont: ['./iconfont/下载.png', './iconfont/礼物.png', './iconfont/分享.png', './iconfont/举报.png'],
            tang_body1: [
                { num: '72.8k', title: '好玩好好玩' },
                { num: '72.8k', title: '好玩好好玩' },
                { num: '72.8k', title: '好玩好好玩' },
            ],
            tang_s1a: [312312, 3123123, 32131, 3131, 31223123, 3123123123, 31231231, 3123123, 31231231, 3131],
            tang_body2_wen1: `    书籍介绍:

这里是属于斗气的世界，没有花俏艳丽的魔法，有的，仅仅是繁衍到巅峰的斗气！

　　想要知道异界的斗气在发展到巅峰之后是何种境地吗？请观斗破苍穹^_^

　　新书刚开，请各位兄弟多多支持，用推荐票和收藏，砸烂偶吧.^_^　

　  新书等级制度：斗者，斗师，大斗师，斗灵，斗王，斗皇，斗宗，斗尊，斗圣，斗帝。`,
            tang_body2_foot: { title1: '为作者加油打气', title2: '99999+' },
        }
    },
    
        methods: {
            tiao(){
this.$router.push({
    path:'/'
})
            },
            tiaoqu(){
                this.$router.push({
                    path:'/jie/nei'
                })
            },
            tang_fn1() {
                this.$refs.wen1.style.height = '6rem'
                this.$refs.zhankai.style.display = 'none'
                this.$refs.shouqi.style.display = 'block'
            },
            tang_fn2() {
                this.$refs.wen1.style.height = '2.5rem'
                this.$refs.shouqi.style.display = 'none'
                this.$refs.zhankai.style.display = 'block'
            },

        },
}